<template>
    <div>
        <div class="conten">
            <div class="content1">
                <div class="left1">
                    <div class="tit">区域分析</div>
                    <div class="qyfx" id="schart1"></div>
                    <div id="schart1-" v-show="schart1show"><img src="../../assets/img/zanwu.png" alt=""></div>
                </div>
              
                <div class="left3">
                    <div class="tit">人员类型分析</div>
                    <div id="schart3"></div>
                    <div id="schart3-" v-show="schart3show"><img src="../../assets/img/zanwu.png" alt=""></div>
                </div>
            </div>
            <div class="content2">
                <div class="center1">
                    <div class="tit">三月人员管理趋势图</div>
                    <div id="schart4"></div>
                    <div id="schart4-" v-show="schart4show"><img src="../../assets/img/zanwu.png" alt=""></div>
                </div>
                <div class="center2">
                    <div class="center21">
                        <div class="tit">民族分布分析</div>
                        <div id="schart5"></div>
                        <div id="schart5-" v-show="schart5show"><img src="../../assets/img/zanwu.png" alt=""></div>
                    </div>
                    <div class="center22">
                        <div class="tit">分包单位分析</div>
                        <div id="schart6"></div>
                        <div id="schart6-" v-show="schart6show"><img src="../../assets/img/zanwu.png" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="content3">
                <div class="right1">
                    <div class="tit">工种分析</div>
                    <div id="schart7"></div>
                    <div id="schart7-" v-show="schart7show"><img src="../../assets/img/zanwu.png" alt=""></div>
                    <!-- <div id="schart77" v-show="worktye0"><img src="../../assets/img/zanwu.png" alt=""><span>暂无数据</span></div> -->
                </div>
                <div class="right2">
                    <div class="tit">年龄分析</div>
                    <div id="schart8"></div>
                    <div id="schart8-" v-show="schart8show"><img src="../../assets/img/zanwu.png" alt=""></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },

    methods: {},

    data() {
        return {
            schart1show:false,
            schart3show:false,
            schart4show:false,
            schart5show:false,
            schart6show:false,
            schart7show:false,
            schart8show:false,
            worktye1: true,
            worktye0: true,
        
            options2: []
        };
    },
    mounted() {
        var me = this;

        me.section_id = localStorage.getItem('section_id');
        me.station_id = localStorage.getItem('station_id');
        ajax('count_PC/CountByStaffAge', { section_id: me.section_id, station_id:   me.station_id }, function (data) {
            if(data.length==0){
                me.schart8show=true
            }
            var data1 = data.map((a) => a.age_duan);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/age_duan/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart8 = echarts.init(document.getElementById('schart8'));
            let options8 = {
                // title: {
                //     text: '天气情况统计',
                //     subtext: '虚构数据',
                //     left: 'center'
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                color: ['#4F6DCD', '#3AE3BC', '#ffd200', '#63FF8C', '#FF7F2E', '#54FAFF', '#DD5CFF'],
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    // orient: 'vertical',
                    x: 'center', //可设定图例在左、右、居中
                    y: 'top', //可设定图例在上、下、居中
                    padding: [50, 45, 20, 40], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]

                    data:data1
                },
                series: [
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 600,
                                        fontSize: 15 //文字的字体大小
                                    },
                                    // position:'inner',
                                    formatter: '{b} : {c} ({d}%)'
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '16',
                                        fontWeight: 600
                                    }
                                }
                            }
                        },
                        name: '年龄人数',
                        type: 'pie',
                        radius: '36%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data:data2,
                        roseType: 'radius',

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };

            myChart8.setOption(options8);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart8.resize();
            });
        });

        ajax('count_PC/CountByWorktype', { section_id: me.section_id, station_id: me.station_id }, function (data) {
         
    if(data.length==0){
                me.schart7show=true
            }
    
            if (data.length == 0) {
                me.worktye0 = true;
                me.worktye1 = false;
                console.log(me.worktye0, 9987);
            } else {
                // me1.$set( me.worktye1, false, true )
                // me1.$set( me.worktye0, true, false )
                me.worktye1 = true;
                me.worktye0 = false; 
                // console.log(me1.worktye0, me1.worktye1,typeof(me1.worktye0), 987);
            }
          
            var data0 = data;
            var data1 = data0.map((a) => a.worktype_name);

            var data2 = JSON.parse(
                JSON.stringify(data0)
                    .replace(/worktype_name/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart7 = echarts.init(document.getElementById('schart7'));
            let options7 = {
                      color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '13%',
                    containLabel: true
                },
                xAxis: [
                    {
                        axisLabel: {
                            interval: 0,
                            rotate: 40,
                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'category',
                        data: data1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#315070'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 人', //单位
                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '30%',
                        data:data2,
                        // color:'rgb(42,170,227)',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#ba7ef3'
                                    },
                                    {
                                        offset: 1,
                                        color: '#4eb9ad'
                                    }
                                ])
                            }
                        }
                    }
                ]
            };

            myChart7.setOption(options7);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart7.resize();
            });
        });
         
        ajax('count_PC/CountBySub', { section_id: me.section_id}, function (data) {
            if(data.length==0){
                me.schart6show=true
            }
            var data1 = data.map((a) => a.sub_name);
            var data2 = JSON.parse(
                JSON.stringify(data)
                    .replace(/sub_name/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart6 = echarts.init(document.getElementById('schart6'));
            let options6 = {
                //         tooltip : {
                //     trigger: 'item',
                //     formatter: "{a} <br/>{b} : {c} ({d}%)"
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#409EFF', '#67C23A', '#fcc11e', '#ffd200', '#7ba1ce','#F56C6C'],
                legend: {
                    textStyle: {
                        color: '#fff',
                        fontWeight: 600
                    },
                    x: 'center', //可设定图例在左、右、居中
                    y: 'bottom', //可设定图例在上、下、居中
                    padding: [0, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    data: data1
                },
                series: [
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 600,
                                        fontSize: 15 //文字的字体大小
                                    },
                                    // position:'inner',
                                    formatter: ' {c} ({d}%)'
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '17',
                                        fontWeight: 600
                                    }
                                }
                            }
                        },
                        name: '分包单位',
                        type: 'pie',
                        radius: '40%',
                        center: ['50%', '35%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart6.setOption(options6);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart6.resize();
            });
        });

        ajax('count_PC/CountByStaffNation', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            if(data.length==0){
                me.schart5show=true
            }
            var data0 = data;
            var data1 = data0.map((a) => a.staff_nation);

            var data2 = JSON.parse(
                JSON.stringify(data0)
                    .replace(/staff_nation/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart5 = echarts.init(document.getElementById('schart5'));
            let options5 = {
                // title: {
                //     text: '天气情况统计',
                //     subtext: '虚构数据',
                //     left: 'center'
                // },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#e45c70', '#0da7d7', '#fcc11e', '#ffd200', '#7ba1ce'],
                legend: {
                    textStyle: {
                        color: '#fff',
                        fontWeight: 600
                    },
                    x: 'center', //可设定图例在左、右、居中
                    y: 'bottom', //可设定图例在上、下、居中
                    padding: [0, 0, 20, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    data: data1
                },
                series: [
                    {
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 600,
                                        fontSize: 15 //文字的字体大小
                                    },
                                    // position:'inner',
                                    formatter: ' {c} ({d}%)'
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '17',
                                        fontWeight: 600
                                    }
                                }
                            }
                        },
                        name: '民族',
                        type: 'pie',
                        radius: '40%',
                        center: ['45%', '40%'],
                        selectedMode: 'single',
                        data: data2,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart5.setOption(options5);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart5.resize();
            });
        });
        ajax('count_PC/StaffQs', { section_id: me.section_id }, function (data) {
            console.log(data,999)
            if(data.length==0){
                me.schart4show=true
            }
            var hahah = JSON.parse(JSON.stringify(data).replace(/count/g, 'value'));
            var na = data.map(function (v) {
                return v.month;
            });
            let myChart4 = echarts.init(document.getElementById('schart4'));
            let options4 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    x: 'center', //可设定图例在左、右、居中
                    y: 'top', //可设定图例在上、下、居中
                    padding: [30, 0, 0, 0],
                    data: ['人员管理']
                },
                grid: {
                    x: 50,
                    y: 100,
                    x2: 50,
                    y2: 100,
                    borderWidth: 10
                },
                xAxis: {
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontWeight: 600,
                            color: '#c3dbff', //更改坐标轴文字颜色
                            fontSize: 14 //更改坐标轴文字大小
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#315070' //更改坐标轴颜色
                        }
                    },
                    type: 'category',
                    data: na
                },

                yAxis: {
                    // splitLine: { show: false }, //取消网格线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#315070'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}人', //单位
                        show: true,
                        textStyle: {
                            fontWeight: 600,
                            color: '#c3dbff', //更改坐标轴文字颜色
                            fontSize: 14 //更改坐标轴文字大小
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#315070' //更改坐标轴颜色
                        }
                    },
                    type: 'value'
                },
                series: [
                    {
                        name: '人员管理',
                        data: hahah,
                        color: ['#45c9f6'], //折线条的颜色
                        type: 'line',
                        areaStyle: {
                            // type: 'default',
                            // color:'#70eeff'
                            normal: {
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: '#45c9f6'
                            }
                        }
                    }
                ]
            };

            myChart4.setOption(options4);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart4.resize();
            });
        });
        ajax('count_PC/CountByType', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            if(data.length==0){
                me.schart3show=true
            }
            var data0 = data;
            console.log(data0,999)

            var hahah = JSON.parse(JSON.stringify(data0).replace(/count/g, 'value'));
            var na = data0.map(function (v) {
                return v.type;
            });

            let myChart3 = echarts.init(document.getElementById('schart3'));
            let options3 = {
                title: {
                    text: ' '
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                grid: {
                    top: '10%',
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    splitLine: { show: false }, //取消网格线
                    axisLabel: {
                        formatter: '{value}人', //单位
                        show: true,
                        textStyle: {
                            color: '#c3dbff', //更改坐标轴文字颜色
                            fontSize: 14, //更改坐标轴文字大小
                            fontWeight: 500
                        }
                    },
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    splitLine: { show: false }, //取消网格线
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#c3dbff', //更改坐标轴文字颜色
                            fontSize: 14, //更改坐标轴文字大小
                            fontWeight: 600
                        }
                    },
                    type: 'category',
                    data:na
                },
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: 20, //柱子宽度
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = [
                                        'rgb(95,229,235)',
                                        'rgb(164,25,238)',
                                        'rgb(164,205,28)',
                                        'rgb(164,205,238)',
                                        'rgb(42,170,227)',
                                        'rgb(125,46,94)',
                                        'rgb(164,205,238)'
                                    ];
                                    return colorList[params.dataIndex];
                                }
                            },
                            //鼠标悬停时：
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data:hahah
                    }
                ]
            };

            myChart3.setOption(options3);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart3.resize();
            });
        });

        ajax('count_PC/CountByStaffProvince', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            var data0 = data;
            if(data.length==0){
                me.schart1show=true
            }
            console.log(data,8888888888)
            var data1 = data0.map((a) => a.staff_province);

            var data2 = JSON.parse(
                JSON.stringify(data0)
                    .replace(/staff_province/g, 'name')
                    .replace(/count/g, 'value')
            );

            let myChart1 = echarts.init(document.getElementById('schart1'));
            let options1 = {
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '13%',
                    containLabel: true
                },
                xAxis: [
                    {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'category',
                        data: data1,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#315070'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 人', //单位
                            show: true,
                            textStyle: {
                                color: '#c3dbff', //更改坐标轴文字颜色
                                fontSize: 14 //更改坐标轴文字大小
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#315070' //更改坐标轴颜色
                            }
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '30%',
                        data:data2,
                        // color:'rgb(42,170,227)',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#ba7ef3'
                                    },
                                    {
                                        offset: 1,
                                        color: '#4eb9ad'
                                    }
                                ])
                            }
                        }
                    }
                ]
            };

            myChart1.setOption(options1);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart1.resize();
            });
        });
    }
};
</script>
<style scoped>
.tit {
    
    text-indent: 5px;
    margin-top: 10px;
    width: 94%;
    float: left;
    margin-left: 3%;
    font-size: 20px;
    line-height: 30px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    height: 30px;
    background: linear-gradient(90deg, rgba(48, 83, 175, 1), rgba(8, 24, 65, 1));
}
.conten {
    width: 97%;
    margin-left: 1.5%;
    height: 880px;
    display: flex;
    justify-content: space-between;
}
.content1 {
    width: 493px;
    height: 880px;
    /* background: #ccc; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.left1 {
    width: 493px;
    height: 458px;
    background: url(../../assets/img/bei1.png) no-repeat;
    background-size: 100% 100%;
}

#schart3 {
    float: left;
    /* background: cyan; */
    width: 485px;
    height: 350px;
}
#schart2 {
    float: left;
    /* background: cyan; */
    width: 493px;
    height: 240px;
}
#schart3- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
     width: 485px;
    height: 350px;
}
#schart3- img {
    width: 200px;
    height: 200px;
    
}
#schart1 {
    float: left;
    /* background: cyan; */
    width: 493px;
    height: 390px;
}
#schart1- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 493px;
    height: 390px;
}
#schart1- img {
    width: 200px;
    height: 200px;
    
}

.left2 {
    width: 493px;
    height: 282px;
    background: url(../../assets/img/bei1.png) no-repeat;
    background-size: 100% 100%;
}
.left3 {
    width: 493px;
    height: 413px;
    background: url(../../assets/img/bei1.png) no-repeat;
    background-size: 100% 100%;
}
.content2 {
    width: 784px;
    height: 880px;
    /* background: #ccc; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.center1 {
    width: 784px;
    height: 458px;
    background: url(../../assets/img/bei2.png) no-repeat;
    background-size: 100% 100%;
}
#schart4 {
    float: left;
    width: 784px;
    height: 416px;
}
#schart4- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 784px;
    height: 416px;
}
#schart4- img {
    width: 200px;
    height: 200px;
    
}
.center2 {
    width: 784px;
    height: 413px;
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;
}
#schart5,
#schart6 {
    float: left;
    width: 375px;
    height: 356px;
}
#schart5-,#schart6- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 375px;
    height: 356px;
}
#schart5- img,#schart6- img {
    width: 200px;
    height: 200px;
    
}
.center21 {
    width: 375px;
    height: 413px;
    /* background: #ccc; */
    background: url(../../assets/img/bei3.png) no-repeat;
    background-size: 100% 100%;
}
.center22 {
    width: 375px;
    height: 413px;
    /* background: #ccc; */
    background: url(../../assets/img/bei3.png) no-repeat;
    background-size: 100% 100%;
}
.content3 {
    width: 493px;
    height: 880px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#schart7 {
    float: left;
    width: 493px;
    height: 387px;
}
#schart7- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 493px;
    height: 387px;
}
#schart7- img{
    width: 200px;
    height: 200px;
    
}
#schart77 {
    /* top: 20px;
    left: 0;
    position: absolute; */
    float: left;
    width: 493px;
    height: 387px;
   /* display: flex;
    justify-content: center; */
}

#schart77 img{
    display: block;
    margin-top: 100px;
    margin-left: 157px;
    width: 150px;
    height: 150px;
}
#schart77 span{
    /* float: left; */
    display: block;
    width: 100%;
    height: 20px;
    font-size: 20px;
    /* background: chartreuse; */
    color: aliceblue;
    line-height: 20px;
    text-align: center;
}
#schart8 {
    float: left;
    width: 493px;
    height: 400px;
}
#schart8- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 493px;
    height: 400px;
}
#schart8- img{
    width: 200px;
    height: 200px;
    
}
.right1 {
    position: relative;
    width: 493px;
    height: 429px;
    background: url(../../assets/img/bei4.png) no-repeat;
    background-size: 100% 100%;
}
.right2 {
    width: 493px;
    height: 435px;
    background: url(../../assets/img/bei5.png) no-repeat;
    background-size: 100% 100%;
}
</style>